<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const arr = new Array(20).fill(0).map((item)=> Math.round(Math.random()*100))
    console.log(arr)
    function guibing(arr) {
      const len =  arr.length
      if(len<2) return arr
      const mid = Math.floor( len / 2)
      return hx(guibing(arr.slice(0, mid)), guibing(arr.slice(mid)) )
    }
    const hx = (left, right)=> {
      const result = []
      while(left.length > 0 && right.length >0) {
        if(left[0] <= right[0]) {
          result.push(left.shift())
        }else  {
          result.push(right.shift())
        }
      }
      while(left.length > 0) {
        result.push(left.shift())
      }
      while(right.length > 0) {
        result.push(right.shift())
      }
      return result
    }
    console.log(guibing(arr))
  </script>
</body>
</html>